<template>
	<view class="box">
		<!-- 搜索组件 -->
		<my-search></my-search>
		<!-- 商品菜单 -->
		<van-dropdown-menu>
			<van-dropdown-item v-model="goodsMenu.value1" :options="goodsMenu.option1" />
			<van-dropdown-item @click="onConfirm(goodsMenu.value2)" v-model="goodsMenu.value2"
				:options="goodsMenu.option2" />
		</van-dropdown-menu>
		<!-- 没有商品 -->
		<view :style="{height: wh + 'px'}" v-show="active" class="noCommodity">
			<image src="https://chenjdd.oss-cn-chengdu.aliyuncs.com/wukongshop/素材/超值爆款素材/暂无商品.png">
			</image>
			<view class="tips">暂无商品，去看点别的吧</view>
		</view>
		<!-- 有商品 -->
		<view class="goods-list">
			<view @click="goInfo(item)" class="goods-item" v-for="item in cateGoodsList" :key="item.id">
				<!-- 商品图片 -->
				<view class="pictrue">
					<image :src="item.goods_images[0]"></image>
				</view>
				<!-- 商品介绍 -->
				<view class="text">
					<view class="goods_name">{{item.goods_name}}</view>
					<view class="goods_price">￥{{item.goods_price}}</view>
					<view class="goods_sales">已售{{item.goods_sales}}件</view>
				</view>
			</view>
		</view>
		<!-- 备案 -->
		<view class="foot">蜀ICP备2023008183号-1</view>
	</view>
</template>

<script>
	// 导入api
	import api from "../../../api/api.js";
	import Config from "../../../components/my-config/my-config.vue"
	export default {
		data() {
			return {
				wh: '',
				// 页面地址参数
				query: "",
				// 翻页
				pageObj: {
					page: 1,
					limit: 10
				},
				// 总数
				total: 0,
				// 节流阀
				isFlag: false,
				// 判断有没有商品
				active: true,
				// 一级分类商品列表
				cateGoodsList: [],
				// 商品菜单数据
				goodsMenu: {
					value1: 0,
					value2: "a",
					option1: [{
						text: '全部商品',
						value: 0
					}],
					option2: [{
							text: '默认排序',
							value: 'a'
						},
						{
							text: '价格排序',
							value: 'b'
						},
						{
							text: '销量排序',
							value: 'c'
						},
					],
				}
			}
		},
		methods: {
			// 获取一级分类商品
			getCateGoods() {
				this.isFlag = true;
				api.getCateGoods(this.query.navId, this.pageObj).then(res => {
					this.isFlag = false;
					// 获取失败
					if (res.data.status != 200) return uni.$showMsg(res.data.data.err);
					// 获取成功
					this.cateGoodsList = [...this.cateGoodsList, ...res.data.data.list];
					this.total = res.data.data.count;
					// 判断有没有商品
					this.active = this.cateGoodsList == false ? true : false;
					uni.$showMsg(res.data.msg);
				})
			},
			// 判断是什么排序
			onConfirm(value) {
				if (value == "b") {
					// 价格又低到高
					this.cateGoodsList = this.cateGoodsList.sort((a, b) => {
						return a.goods_price - b.goods_price;
					});
				} else if (value == "c") {
					// 销量又低到高
					this.cateGoodsList = this.cateGoodsList.sort((a, b) => {
						return a.goods_sales - b.goods_sales;
					});
				}
			},
			// 跳转
			goInfo(item) {
				uni.navigateTo({
					url: `/pages/goods/goods_details/goods_details?id=${item.id}&goods_id=${item.goods_id}`
				})
			}
		},
		onLoad(option) {
			uni.setNavigationBarTitle({
				title: `${option.name}-悟空商城`
			})
			// 获取当前可用高度
			const sysInfo = uni.getSystemInfoSync();
			this.wh = sysInfo.windowHeight - 139;
			// 获取页面地址参数
			this.query = option;
			// 获取一级分类商品
			this.getCateGoods();
		},
		// 下拉刷新
		onReachBottom() {
			if (this.pageObj.page * this.pageObj.limit >= this.total) return uni.$showMsg("数据加载完毕");;
			if (this.isFlag) return;
			this.pageObj.page++;
			this.getCateGoods();
		}
	}
</script>

<style>
	.box {
		width: 100%;
		height: 100%;
	}

	/* 没有商品 */
	.noCommodity {
		background-color: white;
		border-top: 3px solid #f5f5f5;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.noCommodity image {
		width: 220px;
		height: 179px;
		margin: 16px auto 16px auto;
	}

	.noCommodity .tips {
		padding-bottom: 30rpx;
		color: #aaa;
		font-size: 13px;
	}

	/* 有商品 */
	.goods-list {
		padding: 0 10px;
		margin-top: 30rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.goods-list .goods-item {
		width: 344rpx;
		margin-top: 30rpx;
		background-color: #fff;
		border-radius: 10px;
		display: block;
	}

	.pictrue {
		position: relative;
		width: 100%;
		height: 184px;
	}

	.pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 10px 10px 0 0;
	}

	.text {
		padding: 10px 9px 13px 9px;
	}

	.goods-item .text .goods_name {
		padding: 0.625rem 0.3125rem;
		box-sizing: border-box;
		color: #222;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 13px;
	}

	.goods-item .text .goods_price {
		color: rgb(253, 80, 47) !important;
		font-weight: 600;
		font-size: 17px;
	}

	.goods-item .text .goods_sales {
		margin-top: 0.15625rem;
		padding: 0 0.3125rem;
		font-size: 11px;
		color: #aaa;
	}

	/* 底部 */
	.foot {
		width: 300rpx;
		height: 39px;
		margin: 80rpx auto;
		display: block;
		font-size: 12px;
		text-align: center;
		line-height: 39px;
		color: #CCCCCC;
	}
</style>